<template>
  <el-drawer
    :visible.sync="opened"
    :with-header="false"
    direction="rtl"
    :size="getLayoutStore.device === 'mobile' ? '75%' : '280px'"
  >
    <el-card class="wrapper" style="padding-top: 20px">
      <div class="close-wrapper" @click="opened = false">
        <i class="el-icon-close"></i>
      </div>
      <el-divider content-position="center">主题风格</el-divider>
      <el-row :gutter="5">
        <el-col
          v-for="(item, index) of styleExampleList"
          :key="index"
          :span="8"
          class="example-wrapper"
        >
          <ly-style-example
            :checked="item.checked"
            :left-bg="item.leftBg"
            :right-top-bg="item.rightTopBg"
            :right-bottom-bg="item.rightBottomBg"
            @click.native="exampleClick(item)"
          />
        </el-col>
      </el-row>
      <el-divider content-position="center">布局模式</el-divider>
      <el-row :gutter="5">
        <el-col
          v-for="(item, index) of layoutExampleList"
          :key="index"
          :span="8"
          class="example-wrapper"
        >
          <ly-style-example
            :checked="item.checked"
            :left-bg="item.leftBg"
            :right-top-bg="item.rightTopBg"
            :right-bottom-bg="item.rightBottomBg"
            :class="[item.class || '']"
            :tip-text="item.tipText"
            @click.native="layoutExampleClick(item)"
          />
        </el-col>
      </el-row>
      <el-divider content-position="center">主题颜色</el-divider>
      <div class="colors-wrapper">
        <div
          v-for="(item, index) of primartyColorList"
          :key="index"
          class="color-wrapper"
          :class="{ circle: item.checked }"
          :style="{ 'background-color': item.value }"
          @click="colorClick(item)"
        ></div>
      </div>
      <div style="height: 20px"></div>
      <el-divider content-position="center">按钮显示</el-divider>
      <div class="setting-item-wrapper">
        <span>固定顶部导航</span>
        <el-switch
          v-model="getLayoutStore.isFixedNavBar"
          :disabled="getLayoutStore.layoutMode === 'ttb'"
        />
      </div>
      <div class="setting-item-wrapper">
        <span>搜索</span>
        <el-switch v-model="getLayoutStore.actionItem.showSearch" />
      </div>
      <div class="setting-item-wrapper">
        <span>消息</span>
        <el-switch v-model="getLayoutStore.actionItem.showMessage" />
      </div>
      <div class="setting-item-wrapper">
        <span>刷新</span>
        <el-switch v-model="getLayoutStore.actionItem.showRefresh" />
      </div>
      <div class="setting-item-wrapper">
        <span>全屏</span>
        <el-switch v-model="getLayoutStore.actionItem.showFullScreen" />
      </div>
      <el-divider />
      <ly-content style="margin-bottom: 25%" />
    </el-card>
  </el-drawer>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import { LayoutStoreModule } from "@/store/modules/LayoutStore";
import { toggleThemeClass, toggleThemeColorClass } from "@/utils/utils";
import LyContent from "@/layouts/components/setting/LyContent.vue";

@Component({
  name: "LySettingInfo",
  components: { LyContent },
})
export default class LySettingInfo extends Vue {
  //#region vue prop =================================

  //#endregion

  //#region vue data =================================
  opened = false;
  styleExampleList = [
    {
      leftBg: "#001529",
      rightTopBg: "#ffffff",
      rightBottomBg: "#f5f5f5",
      checked: false,
      themeId: "dark-side",
    },
    {
      leftBg: "#ffffff",
      rightTopBg: "#ffffff",
      rightBottomBg: "#d4d4d4",
      checked: false,
      themeId: "light",
    },
    {
      leftBg: "#000000",
      rightTopBg: "#333333",
      rightBottomBg: "#555555",
      checked: false,
      themeId: "dark",
    },
  ];
  layoutExampleList = [
    {
      leftBg: "#000000",
      rightTopBg: "#d4d4d4",
      rightBottomBg: "#d4d4d4",
      checked: true,
      layoutId: "ltr",
      tipText: "左右",
    },
    {
      leftBg: "#d4d4d4",
      rightTopBg: "#ffffff",
      rightBottomBg: "#d4d4d4",
      checked: false,
      layoutId: "ttb",
      class: "extra-class",
      tipText: "上下",
    },
    {
      leftBg: "#000000",
      rightTopBg: "#d4d4d4",
      rightBottomBg: "#d4d4d4",
      checked: false,
      layoutId: "lcr",
      class: "extra-class-1",
      tipText: "分栏",
    },
  ];
  primartyColorList = [
    {
      name: "blue",
      value: "#409eff",
      checked: true,
    },
    {
      name: "cyan",
      value: "#13C2C2",
      checked: false,
    },
    {
      name: "red",
      value: "#F5222D",
      checked: false,
    },
    {
      name: "purple",
      value: "#722ED1",
      checked: false,
    },
  ];
  //#endregion
  //#region computed getter =================================
  get getLayoutStore() {
    return LayoutStoreModule;
  }
  //#endregion
  //#region vue life =================================
  created() {
    console.log("LySettingInfo " + "created");
  }

  mounted() {
    console.log("LySettingInfo " + "mounted");
    this.styleExampleList.forEach((it) => {
      it.checked = this.getLayoutStore.theme === it.themeId;
    });
  }

  beforeDestroy() {
    console.log("LySettingInfo " + "beforeDestroy");
  }

  //#endregion
  //#region comp getter =================================

  //#endregion
  //#region server data =================================

  //#endregion
  //#region components Func =================================
  show() {
    this.opened = true;
  }
  close() {
    this.opened = false;
  }

  exampleClick(item: any) {
    this.styleExampleList.forEach((it) => {
      it.checked = it === item;
    });
    this.getLayoutStore.changeTheme(item.themeId);
    toggleThemeClass(document.body, this.getLayoutStore.theme);
  }
  layoutExampleClick(item: any) {
    this.layoutExampleList.forEach((it) => {
      it.checked = it === item;
    });
    this.getLayoutStore.changeLayoutMode(item.layoutId);
  }
  colorClick(item: any) {
    this.primartyColorList.forEach((it) => {
      it.checked = it === item;
    });
    toggleThemeColorClass(document.body, "theme_color_" + item.name);
  }
  //#endregion
  //#region Public Func =================================

  //#endregion
  //#region view layout =================================

  //#endregion
}
</script>
<style lang="scss"></style>
<style lang="scss" scoped></style>
